<template>
    <!-- 微信头部-普通 -->
    <div class="head" :style="{ 'background-color': pageData.navBar.swipes_color ? pageData.navBar.swipes_color : pageData.navBar.background }" v-if="!pageData.navBar.hidden">
        <div class="head-title line-one" :style="{ color: pageData.navBar.color }">{{ pageData.navBar.title }}</div>
    </div>
    <!-- 微信头部-沉浸式 -->
    <div class="head" :style="{ 'background-color': pageData.navBar.swipes_color ? pageData.navBar.swipes_color : pageData.navBar.background, position: 'absolute', top: 0, 'z-index': 11 }" v-if="pageData.navBar.hidden">
        <div class="head-search flexs">
            <div class="head-search__text line-one" :style="{ color: pageData.navBar.color }">{{ pageData.navBar.title }}</div>
            <div class="head-search__search" v-if="pageData.navBar.search_switch">
                <el-input class="search-input" readonly placeholder="请输入关键词" :prefix-icon="Search" v-if="pageData.navBar.search_bg == '#fff'" />
                <el-input
                    class="search-input search-none"
                    readonly
                    placeholder="请输入关键词"
                    :prefix-icon="Search"
                    v-if="pageData.navBar.search_bg == 'none'"
                />
            </div>
        </div>
    </div>
</template>

<script setup>
import { Search } from "@element-plus/icons-vue"

/**
 * 顶部菜单
 * @property {Object} pageData  页面数据
 */
const props = defineProps({
    pageData: {
        type: Object,
        default: {
            title: "",
            navBar: {
                background: "transparent",
                search_switch: false,
                search_bg: "#fff",
                hidden: false,
                swipes_color: "#18A33F",
            },
        },
    },
})
</script>

<style lang="less" scoped>
.head {
    // background: url("../../assets/images/head_bg2.png") no-repeat;
    background: url("https://cdn.huashushop.com/tenant_593be52a46f869eea8b31d146d21de7a/album/202304/20230413_1b0b249082b6c3d112ba71059a6bdaa3.png") no-repeat;
    height: 64px;
    width: 375px;
    margin: 0 auto;
    background-size: cover;
    background-position: 50%;
    position: relative;
    transition: all .5s
}
.head-title {
    width: 180px;
    margin: 0 auto;
    text-align: center;
    padding-top: 31px;
    font-size: 14px;
}
.head-search {
    height: 64px;
    padding: 18px 104px 0px 34px;
    .head-search__text {
        font-size: 16px;
        flex: 1;
    }
    .head-search__search {
        padding-top: 2px;
        flex: none;
        :deep(.search-input) {
            width: 150px;
            .el-input__wrapper {
                border-radius: 30px;
                box-shadow: 0 0 0 0;
                height: 30px;
            }
        }
        :deep(.search-none) {
            .el-input__wrapper {
                background: rgba(0, 0, 0, 0.2);
            }
            .el-icon {
                color: #fff;
            }
            /* WebKit, Blink, Edge */
            ::-webkit-input-placeholder {
                color: #fff;
            }
            /* Mozilla Firefox 4 to 18 */
            :-moz-placeholder {
                color: #fff;
                opacity: 1;
            }
            /* Mozilla Firefox 19+ */
            ::-moz-placeholder {
                color: #fff;
                opacity: 1;
            }
            /* Internet Explorer 10-11 */
            :-ms-input-placeholder {
                color: #fff;
            }
        }
    }
}
</style>
